<template>
    <a-modal v-model="visible"
             :title="title"
             @cancel="cancel"
             centered
             width="40em"
             footer="">
        <a-form-model
            ref="form"
            :model="majorRecord"
            :rules="rules"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 16 }"
        >
            <!--弹框信息设置-->
            <a-form-model-item label="专业名称" prop="name">
                <a-input disabled="disabled"  v-model="majorRecord.name"/>        <!--从mock中获取信息-->
            </a-form-model-item>
            <!--设置学院不可修改-->
            <a-form-model-item label="专业代码" prop="collegeName">
                <a-input disabled="disabled" v-model="majorRecord.majNum"/>  <!--从mock中获取信息-->
            </a-form-model-item>
            <a-form-model-item label="毕业要求" prop="collegeName" v-if="majorRecord.gradRequirements.length>0">
               <a-textarea  v-for="item in majorRecord.gradRequirements" :key="item.gradId" disabled="disabled" cols="50" rows="3"  v-model="item.content" ></a-textarea>
            </a-form-model-item>
            <a-form-model-item label="毕业要求" prop="collegeName" v-else>
              <a-textarea disabled="disabled" cols="50" rows="3"></a-textarea>
            </a-form-model-item>
        </a-form-model>
    </a-modal>
</template>
<script>
//没有填写信息的提醒样式
import {mapState} from "vuex";

const rules={
    collegeName:[{}],
    name:[{ required: true, message: '请输入专业名称!',trigger: 'change'}],
}
export default {

    name: "Requirement",
    data() {
        return {
            rules,          //表格检验
            title:'',       //Modal标题
            visible:false,  //Modal是否可见
            majorRecord:{
              name: '',
              majNum: '',
              gradRequirements: []
            },
            //     {
            //     majorId:'0032',
            //     name:'软件工程',
            //     require1:'1.1 掌握数学、物理、数据科学、人工智能等领域的基本知识，培养抽象思维与模型推理能力，用于计算机复杂工程问题的分析与建模。握数学、物理、数据科学、握数学、物理、数据科学、',
            //     require2:'1.2 掌握程序设计与数据结构等专业基础知识，培养算法设计与计算思维能力，对计算机复杂工程问题提出解决方案。'
            // },
            majorData:[]
        }
    },
    methods:{
        //表格编辑特定专业--根据记录record，判断是添加专业还是修改专业
        showModel(key){
            this.visible=true;//显示弹框

                //设置弹框中的取消、修改、标题的具体显示，在返回的data中是‘’
                this.title='查看专业毕业要求指标点';
                this.cancelText='取消';
                this.flag=true;
                console.log("获取毕业生指标点")
                //在专业记录中存储，ID、名称name、学院名称collegeName
                // this.majorRecord.majorId=record.majorId;
                // this.majorRecord.name=record.name;
                // this.majorRecord.collegeName=record.collegeName;
                    this.$store.dispatch('major/getMajorRequire',{
                        majorId:key,
                        token:this.accessState.token
                    }).then(res => {
                        res.data.gradRequirements.map((item)=>{
                          item.content=item.num+item.content;
                        })
                        this.majorRecord=res.data;
                    }).catch(err => {
                        this.$message.error(err.msg);
                    })
        },

        //取消时回调
        cancel(){
            // this.$refs.form.resetFields();//重置表单
            this.visible=false;//Modal设为不可见
        }
    },
    computed: {
      ...mapState({ // 这个是提取store中access文件夹目录下的数据
        'accessState': 'access',
        'majorState':'major'
      })
    }
}

</script>
<style>

</style>
